import { Icon, List } from 'antd-mobile';
import React from 'react';
import { connect } from 'dva';

const ListItem = List.Item;
import styles from './index.less';

class Tab3 extends React.Component {
  constructor(props) {
    super(props);
  }
  showMsg = (i) => {
    const { dispatch, inx } = this.props;

    dispatch({
      type: 'detail/showMsg',
      payload: { inx: i === inx ? -1 : i },
    });
  };
  render() {
    const { data, inx } = this.props;
    return (
      <div style={{ width: '100%' }}>
        <List style={{ width: '100%' }}>
          {data.map((item, i) => {
            return (
              <ListItem key={i}>
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    backgroundColor: '#fff',
                    paddingBottom: 10,
                  }}
                  className={styles.tab2}
                >
                  <span className={styles.icon}>{i + 1}</span>
                  <div
                    style={{
                      display: 'flex',
                      flex: 1,
                      marginLeft: 20,
                      flexDirection: 'column',
                      alignItems: 'flex-start',
                      backgroundColor: '#fff',
                    }}
                    className={styles.hisTop}
                  >
                    <div
                      style={{ display: 'flex', alignItems: 'center', width: '100%' }}
                      className={styles.valdate}
                    >
                      <span style={{ flex: 1 }}>{item.spFlow}</span>
                      <span className={styles.vtime}>{item.spDate}</span>
                    </div>
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        width: '100%',
                        paddingRight: 20,
                        marginTop: 10,
                        justifyContent: 'space-between',
                      }}
                      className={styles.his}
                    >
                      <span>{item.spPerson}</span>
                    </div>
                    <div style={{ whiteSpace: inx === i ? 'pre-wrap' : 'nowrap' }} className={styles.yj} onClick={() => this.showMsg(i)}>
                      审批意见：{item.spYj}
                    </div>
                  </div>
                </div>
              </ListItem>
            );
          })}
        </List>
      </div>
    );
  }
}
export default connect(detail => detail)(Tab3);
